<template>
  <div class="bigBox">
    <div class="top1">
      <el-button type="primary" @click="dialogOverflowVisible = true" color="rgb(66,139,202)"><b>+新增</b></el-button>
      <el-input
        v-model="input"
        style="width: 40%; height: 5%"
        placeholder="关键字"
      ></el-input>
      <el-button-group>
        <el-button @click="search" color="rgb(66,139,202)">搜索</el-button>
        <el-button style="width: 5%" @click="show1 = !show1"
          ><el-icon><ArrowDown /></el-icon
        ></el-button>
      </el-button-group>
      <el-button> 仓库管理 </el-button>
    </div>
    <div class="showtop" v-show="show1">
      <p>高级搜索</p>
      <p @click="dialogVisible = true">自定义列显示</p>
      <p>打印</p>
    </div>
    <!-- table -->
    <div class="table1">
      <table
        v-loading="loading"
        element-loading-text="加载中..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.5)"
      >
        <tr>
          <th></th>
          <th v-show="cities[0].feg">申请人</th>
          <th v-show="cities[1].feg">申请人部门</th>
          <th v-show="cities[2].feg">单号</th>
          <th v-show="cities[3].feg">仓库名称</th>
          <th v-show="cities[4].feg">仓库管理员</th>
          <th v-show="cities[5].feg">仓库编号</th>
          <th v-show="cities[6].feg">仓库地址</th>
          <th v-show="cities[7].feg">排序号</th>
          <th v-show="cities[8].feg">说明</th>
          <th v-show="cities[9].feg"></th>
        </tr>
        <tbody>
          <tr v-for="(item, index) in list" :key="item._id">
            <td>{{ index + 1 }}</td>
            <td v-show="cities[0].feg">{{ item.proposer }}</td>
            <td v-show="cities[1].feg">{{ item.bumenpro }}</td>
            <td v-show="cities[2].feg">{{ item.dancode }}</td>
            <td v-show="cities[3].feg">{{ item.title }}</td>
            <td v-show="cities[4].feg">{{ item.name }}</td>
            <td v-show="cities[5].feg">{{ item.code }}</td>
            <td v-show="cities[6].feg">{{ item.position }}</td>
            <td v-show="cities[7].feg">{{ item.serial }}</td>
            <td v-show="cities[8].feg">{{ item.context }}</td>
            <td v-show="cities[9].feg">
              <el-dropdown>
                <span>
                  操作
                  <el-icon>
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="xiang(item)"
                      >详情</el-dropdown-item
                    >
                    <el-dropdown-item>详情(新窗口)</el-dropdown-item>
                    <el-dropdown-item>评论</el-dropdown-item>
                    <el-dropdown-item>+添加提醒设置</el-dropdown-item>
                    <el-dropdown-item @click="bianji(item)"
                      >编辑</el-dropdown-item
                    >
                    <el-dropdown-item @click="delitem(item._id)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog v-model="dialogVisible" width="300px" title="自定义列显示">
      <div class="dialog-content">
        <el-checkbox-group v-model="checkedCities">
          <p v-for="(city, index) in cities" :key="city">
            <el-checkbox
              :label="city.name"
              :checked="city.feg"
              @change="handcheck(index)"
            />{{ city.name }}
            <br />
          </p>
        </el-checkbox-group>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="cheAppshow"> 确定 </el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加框 -->
    <el-dialog
      v-model="dialogOverflowVisible"
      title="[新增]仓库管理"
      width="800"
      draggable
      overflow
    >
      <div>
        <p>仓库管理</p>
        <table>
          <tr>
            <td>*仓库名称</td>
            <td>
              <el-input v-model="addinfo.title" style="width: 85%" />
            </td>
            <td>仓库编号</td>
            <td>
              <el-input v-model="addinfo.code" style="width: 85%" />
            </td>
          </tr>
          <tr>
            <td>*仓库管理员</td>
            <td colspan="3">
              <el-input v-model="addinfo.name" style="width: 85%" />
              <el-button color="rgb(66, 161, 220)" style="color: #fff"
                >x&nbsp;&nbsp;选择</el-button
              >
            </td>
          </tr>
          <tr>
            <td>仓库地址</td>
            <td>
              <el-input v-model="addinfo.position" style="width: 85%" />
            </td>
            <td>*排序号</td>
            <td>
              <el-input v-model="addinfo.serial" style="width: 85%" />
            </td>
          </tr>
          <tr>
            <td>说明</td>
            <td colspan="3">
              <el-input
                v-model="addinfo.context"
                style="width: 90%"
                :rows="5"
                type="textarea"
              />
            </td>
          </tr>
        </table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="add()"> 保存(S) </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="chil"
      title="仓库管理"
      width="800"
      height="500"
      draggable
      overflow
    >
      <RouterView />
    </el-dialog>
    <div
      style="display: flex; justify-content: space-between; position: relative"
    >
      <div>
        <!-- 分页 -->
        <el-button-group>
          <el-button style="width: 10px" @click="page = 1">
            <el-icon><DArrowLeft /></el-icon>
          </el-button>
          <el-button style="width: 10px" @click="sha">
            <el-icon><ArrowLeft /></el-icon>
          </el-button>
          <el-button @click="show3 ? show3 = false: show3 = true">
            第{{ page }}页/共{{ Math.ceil(adminlist.length / pageSize) }}页
            <el-icon><CaretBottom /></el-icon>
          </el-button>
          <el-button style="width: 10px" @click="xia">
            <el-icon><ArrowRight /></el-icon>
          </el-button>
          <el-button
            style="width: 10px"
            @click="page = Math.ceil(adminlist.length / pageSize)"
          >
            <el-icon><DArrowRight /></el-icon>
          </el-button>
        </el-button-group>
        &nbsp;
        <el-button @click="setlodding">
          <el-icon color="#000" size="20"><Refresh /></el-icon>
        </el-button>
      </div>
      <div>
        共记录{{ adminlist.length }}条&nbsp;每页
        <input
          ref="myInput"
          value="2"
          :onblur="pagesum"
          :onfocus="pagesum"
          type="number"
          style="
            width: 35px;
            text-align: center;
            height: 22px;
            border: 1px #dddddd solid;
            margin: 0px 2px;
            font-size: 12px;
          "
        />
        条
      </div>
      <div v-show="show3" class="pagelist">
        <p
          v-for="i in Math.ceil(adminlist.length / pageSize)"
          :key="i"
          :class="i == page ? 'active' : ''"
          @click="adpage(i)"
        >
          第{{ i }}页
        </p>
      </div>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import Axios from "axios";
const router = useRouter();
import {
  ArrowDown,
  DArrowLeft,
  ArrowLeft,
  ArrowRight,
  DArrowRight,
  CaretBottom,
  Refresh,
} from "@element-plus/icons-vue";
const adminlist = ref([]);
const searchlist = ref([]);
const input = ref("");
const visible = ref(false);
const show1 = ref(false);
const show2 = ref(true);
const show3 = ref(false);
const dialogOverflowVisible = ref(false);
const dialogVisible = ref(false);
const chil = ref(false);
const checkedCities = ref([]);
const cheindex = ref([]);
const cities = ref([
  { name: "申请人(base_name)", feg: false },
  { name: "申请人部门(base_deptname)", feg: false },
  { name: "单号(sericnum)", feg: false },
  { name: "仓库名称(depotname)", feg: true },
  { name: "仓库管理员(cgname)", feg: true },
  { name: "仓库编号(depotnum)", feg: true },
  { name: "仓库地址(depotaddress)", feg: true },
  { name: "排序号(sort)", feg: true },
  { name: "说明(depotexplain)", feg: true },
  { name: "操作列", feg: true },
]);
const addinfo = ref({
  proposer: "", //申请人
  bumenpro: "", //申请人部门
  dancode: "", //单号
  title: "", //仓库名称
  name: "", //仓库管理员
  code: "", //仓库编号
  position: "", //地址
  serial: "0", //序列号
  context: "",
  date: new Date(),
});
const page = ref(1);
const pageSize = ref(2);
const myInput = ref(null);
const loading = ref(false);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
onMounted(() => {
  getlist();
});

// 自定义列显示
const handcheck = (index: any) => {
  cheindex.value.push(index);
};

// 需要显示的列
const cheAppshow = () => {
  cheindex.value.forEach((index) => {
    cities.value[index].feg = !cities.value[index].feg;
  });
  dialogVisible.value = false;
  show1.value = false;
  cheindex.value = [];
};

// 获取数据
const getlist = () => {
  Axios.get("http://127.0.0.1:3000/admin/get_adminlist").then((res) => {
    adminlist.value = res.data.data;
    search();
    console.log(res.data);
  });
};

// 添加
const add = () => {
  Axios.post("http://127.0.0.1:3000/admin/addadmin", addinfo.value).then(
    (res) => {
      console.log(res.data);
      if (res.data.code == 200) {
        getlist();
        addinfo.value = {};
      }
    }
  );

  dialogOverflowVisible.value = false;
};

// 详情页
const xiang = (item: any) => {
  router.push({
    path: "/home/admin/item_base_management/warehouse_management/base",
    query: { id: item._id },
  });
  // 本地存储
  localStorage.setItem("item", JSON.stringify(item));
  chil.value = true;
};

// 编辑
const bianji = (item: any) => {
  localStorage.setItem("update_item", JSON.stringify(item));
  chil.value = true;
  router.push({
    path: "/home/admin/item_base_management/warehouse_management/update",
    query: { id: item._id },
  });
};

//删除
const delitem = (id: any) => {
  ElMessageBox.prompt("请输入删除说明", "删除", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      ElMessage({
        type: "success",
        message: `已删除:${value}`,
      });
      Axios.get("http://127.0.0.1:3000/admin/delitem", {
        params: { id: id },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          getlist();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Input canceled",
      });
    });
};

watch(chil, (newval) => {
  if (newval == false) {
    dialogclose();
  }
});

const dialogclose = () => {
  // 路由返回
  router.go(-1);
  getlist();
};

// 分页
const pagesum = (e: any) => {
  console.log(e.target.value);
  if (e.target.value < 1) {
    myInput.value.value = pageSize.value;
    return;
  } else if (e.target.value > adminlist.value.length) {
    myInput.value.value = adminlist.value.length;
    pageSize.value = adminlist.value.length;
  } else {
    pageSize.value = e.target.value;
  }
  show3.value = false;
};
const sha = () => {
  if (page.value > 1) {
    page.value--;
  }
};
const xia = () => {
  if (page.value < Math.ceil(adminlist.value.length / pageSize.value)) {
    page.value++;
  }
};
const adpage = (i: any) => {
  page.value = i;
  show3.value = false;
};

// 加载
const setlodding = () => {
  input.value = "";
  getlist();
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 100);
};

// 计算分页
const list = computed(() => {
  let start = (page.value - 1) * pageSize.value;
  let end = page.value * pageSize.value;
  return searchlist.value.slice(start, end);
});

// 搜索
const search = () => {
  if (input.value == "") {
    searchlist.value = adminlist.value;
    return;
  } else {
    searchlist.value = adminlist.value.filter((item) =>
      item.title.includes(input.value)
    );
    page.value = 1;
  }
};
</script>
    
<style scoped>
.bigBox {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
}
.top1 {
  width: 36%;
  display: flex;
  justify-content: space-between;
}
.showtop {
  position: absolute;
  top: 45px;
  left: 360px;
  width: 120px;
  height: 111px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  z-index: 999;
}
.showtop p {
  width: 100%;
  height: 37px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #ece5e5;
}
.showtop p:hover {
  background-color: #ccc;
}
table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding-left: 10px;
}

.table1 tr:hover {
  background-color: #ccc;
}

th {
  border: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.dialog {
  width: 200px;
  position: absolute;
}
.dialog-content {
  overflow: auto;
  height: 300px;
  color: #000;
}
.dialog-content p {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.dialog-content p:hover {
  background-color: #ccc;
}
.chil {
  position: fixed;
  top: 0;
  left: 0;
}
.pagelist {
  width: 153px;
  position: absolute;
  top: 32px;
  left: 62px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.pagelist p {
  width: 100%;
  height: 36.8px;
  line-height: 40px;
  border-bottom: 1px solid #eae9e9;
  box-sizing: border-box;
  padding-left: 15px;
}
.pagelist p:hover {
  background-color: #f2f0f0;
}
.active {
  background-color: #ccc;
}
</style>